<!-- 提交订单 -->
<template>
  <div class="submit-order">
    <van-nav-bar fixed title="确认订单" safe-area-inset-top>
      <template #left>
        <img style="width: 30px; margin-right: 10px" src="../../assets/images/返回2.png" @click="() => $router.go(-1)"
          alt="" />
        <img style="width: 30px" @click="() => $router.push({ path: '/' })" src="../../assets/images/返回首页.png" alt="" />
      </template>
    </van-nav-bar>
    <!--  -->
    <div class="content">
      <!-- <div class="shop">
        <van-icon size="0.6rem" name="arrow-left" />
        <img src="../../assets/images/mall/店铺头像.png" alt="" />
        <span>店铺名称</span>
      </div> -->
      <div class="card">
        <img :src="item.imgurl" alt="" />
        <div class="right">
          <div>{{item.goods_name}}</div>
          <div>规格：{{item.goods_attr}}</div>
          <div>￥{{item.goods_price}}</div>
        </div>
      </div>
      <van-cell title="数量">
        <template #default>
          <div class="num">
            <!-- <span>2件起购</span> -->
            <van-stepper v-model="item.num" min="1" input-width="0.8rem" button-size="0.7rem" />
          </div>
        </template>
      </van-cell>

    </div>
    <div class="content">
      <van-field v-model="remark" label="备注" placeholder="备注" label-width="1rem" />
      <div class="totip">选填,备注内容需要和商家协商确认</div>
      <!-- <div class="peisong">
        <div>配送方式</div>
        <div class="label">到店自提</div>
      </div> -->
      <van-cell title="地址" />

      <div class="btn" v-if="addresslist.length==0" style="    text-align: center;
    margin-top: 10px;">
        <van-button color="rgb(92,155,246)" style="width: 50%; border-radius: 15px; font-size: 0.45rem" type="info"
          @click="() => $router.push({ path: '/add-address' })">新增地址</van-button>
      </div>


      <div class="address" v-for="item in addresslist" :key="item.id">
        <img src="../../assets/images/address.png" alt="" />
        <div class="detail">
          <div><span>{{item.name}}</span> <span>手机号：{{item.phone}}</span></div>
          <div>{{item.province}}{{item.city}}{{item.region}}{{item.detail}}</div>
        </div>
        <van-radio :name="item.id" v-model="addressid" shape="square"></van-radio>
      </div>
    </div>
    <!-- 提交订单 -->
    <div class="submit">
      <div class="price">
        <span>实付款：</span>
        <span>￥{{order_total_price}}</span>
        <span></span>
      </div>
      <div class="btn" @click="ordersub">立即下单</div>
    </div>
  </div>
</template>

<script>
import Bus from '../../utils/bus.js'
import { cartList, cartEdit } from "../../api/cart";
import { orderAdd, alipay } from "../../api/order";
import { addressList } from "../../api/useraddress";
export default {
  name: "",
  data() {
    return {
      checked: "",
      num: 2,
      remark: "",
      cartlist: [],
      order_total_price: 0,
      addresslist: [],
      addressid: false,
      item: {}
    };
  },
  methods: {

    async onChange(uitem) {

      uitem.userid = localStorage.getItem("userid");
      let res = await cartEdit(uitem);
      console.log("res", res);
    },
    async address() {
      let res = await addressList({ userid: localStorage.getItem("userid") });


      if (res.status == 200) {

        this.addresslist = res.data;
      }

    },
    async ordersub() {
      let obj = {};
      obj.userid = localStorage.getItem("userid");
      obj.goodlist = JSON.stringify([this.item]);


      if (this.addressid == false) {
        this.$toast("请选择地址");
        return;
      }

      obj.address_id = this.addressid;
      obj.total_price = this.order_total_price;


      let res = await orderAdd(obj);
      if (res.status == 200) {

        var ordernum = res.ordernum;
        var total_price = res.total_price;

        let ss = await alipay({ out_trade_no: ordernum, total_amount: total_price });
        if (ss.status == 200) {
          // alert(ss.data);
          window.ReactNativeWebView.aliPay(ss.data);
        }


      }
    }

  },
  computed: {},
  watch: {},
  created() {
    let obj = Object.assign({}, this.$route.query);
    this.item = obj;
    this.order_total_price = obj.num * obj.goods_price;
    this.address();
  },
  mounted() {

    var that = this;

    Bus.$on('address', (data) => {

      console.log("data", data);
      this.address();

    })


    window.aliPayResult = async function (data) {
      that.$toast("下单成功");
      that.$router.push({ path: "/my-order", query: {} });
    }

  },
};
</script>

<style lang="scss" scoped>
.submit-order {
  width: 100%;
  padding-top: 92px;
  padding-bottom: 120px;

  .content {
    width: 92%;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 25px;
    padding: 20px 0 50px;

    .shop {
      display: flex;
      align-items: center;
      padding: 0 30px;

      img {
        width: 50px;
        height: 50px;
        margin: 0 10px;
      }

      span {
        font-size: 28px;
        color: rgb(171, 171, 171);
      }
    }

    .card {
      padding: 0 30px;
      margin-top: 20px;
      display: flex;

      img {
        width: 200px;
        height: 180px;
      }

      .right {
        flex: 1;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        > :first-child {
          font-weight: bold;
          font-size: 30px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          /*将对象作为弹性伸缩盒子模型显示*/
          -webkit-line-clamp: 2;
          /*限制文本的行数，只显示2行*/
          -webkit-box-orient: vertical;
        }

        > :nth-child(2) {
          color: rgb(171, 171, 171);
          font-size: 28px;
        }

        > :last-child {
          font-size: 30px;
          color: #3e96e8;
          font-weight: bold;
        }
      }
    }

    .num {
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        color: #3e96e8;
      }
    }

    .totip {
      width: 100%;
      padding: 10px 30px;
      background-color: rgb(245, 249, 254);
      color: rgb(171, 171, 171);
      font-size: 28px;
    }

    .peisong {
      margin: 20px 0 0;
      width: 100%;
      padding: 0 30px;
      font-size: 28px;
      color: #323233;

      .label {
        width: 200px;
        line-height: 60px;
        text-align: center;
        background-color: rgb(99, 155, 246);
        font-size: 28px;
        color: #fff;
        border-radius: 15px;
        margin-top: 20px;
      }
    }

    .address {
      display: flex;
      padding: 0 30px;
      width: 100%;
      padding: 10px 30px;
      background-color: rgb(245, 249, 254);
      color: rgb(171, 171, 171);
      font-size: 28px;

      img {
        width: 100px;
        height: 100px;
      }

      .detail {
        flex: 1;
        margin-left: 10px;
      }
    }
  }

  .submit {
    width: 100%;
    height: 100px;
    background-color: #fff;
    position: fixed;
    display: flex;
    align-items: center;
    bottom: 0;

    .price {
      flex: 1;
      font-size: 32px;
      font-weight: bold;
      padding-left: 50px;

      >:nth-child(2) {
        color: #3e96e8;
      }

      >:last-child {
        margin-left: 10px;
        color: #3e96e8;
        font-size: 24px;
        font-weight: normal;
      }
    }

    .btn {
      width: 260px;
      background-color: #3e96e8;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 40px;
      color: #fff;
    }
  }
}
</style>